import React, { memo, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';

import { 
  getCategoryAction,
  getCategorySongsAction,
  changeCurrentCategoryAction,
  changeCurrentPageAction
} from "./store/actionCreators";

import { SongsWrapper } from "./style";
import SongsHeader from "./child/songs-header";
import SongsList from "./child/songs-list";

const DisSongs = memo(() => {
  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    const cat = location.state?.keyword || "全部";
    dispatch(changeCurrentCategoryAction(cat));
    dispatch(changeCurrentPageAction(1));
  }, [dispatch, location]);
  
  useEffect(() => {
    dispatch(getCategoryAction());
    dispatch(getCategorySongsAction());
  }, [dispatch]);

  return (
    <SongsWrapper className="wrap-v2">
      <SongsHeader />
      <SongsList />
    </SongsWrapper>
  )
})

export default DisSongs